<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>收银宝</title>
		<link rel="stylesheet" href="dist/css/layui.css" />
		<link rel="stylesheet" href="css/iconfont.css" />
		<link rel="stylesheet" href="css/shouy.css" />
		<style>
			.np_price{
			    color: #000000;
			    height: 45px;
			    border: 0;
			    width:200px;
			    border-radius: 25px;
			    background: #F0F0F0;
			    font-size: 14px;
			    line-height: 45px;
			    text-align: center;
			}
			.mui-popup-input textarea{margin-top: 5px;height: 100px; display: block; width: 90%; font-size: 14px;}
			.mui-popup-input textarea{padding: 5px;}

			.mui-popup-text{font-size: 16px; line-height: normal; padding-bottom: 5px; text-align: left;}
			.mui-popup-inner{position: relative; padding: 25px 15px 0; border-radius: 13px 13px 0 0; background: white;}
			.mui-popup {position: fixed; z-index: 10000; top: 50%; left: 50%; display: none; overflow: hidden; width: 370px; -webkit-transition-property: -webkit-transform, opacity; transition-property: transform, opacity; -webkit-transform: translate3d(-50%, -50%, 0) scale(1.185); transform: translate3d(-50%, -50%, 0) scale(1.185); text-align: center; opacity: 0; color: #000; border-radius: 13px;}
			.mui-popup.mui-popup-in {display: block; -webkit-transition-duration: 400ms; transition-duration: 400ms; -webkit-transform: translate3d(-50%, -50%, 0) scale(1); transform: translate3d(-50%, -50%, 0) scale(1); opacity: 1;}
			.mui-popup-buttons {position: relative; border-top: 1px solid #E6E6E6; display: -webkit-box; display: -webkit-flex; display: flex; height: 44px; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center;}
			.mui-popup-button {font-size: 17px; line-height: 44px; position: relative; display: block; overflow: hidden; box-sizing: border-box; width: 50%; float: left; height: 44px; padding: 0 5px; cursor: pointer; text-align: center; white-space: nowrap; text-overflow: ellipsis; color: #007aff; background: white; -webkit-box-flex: 1; *width: 46%; *float: left;}			
			.mui-popup-button:first-child {border-radius: 0 0 0 13px; border-left: 1px solid #E6E6E6;}
			.mui-popup-button:last-child {border-radius: 0 0 13px;}
			.mui-popup-button.mui-popup-button-bold {font-weight: 600;}
			.mui-popup-backdrop {position: fixed; z-index: 998; top: 0; right: 0; bottom: 0; left: 0; -webkit-transition-duration: 400ms; transition-duration: 400ms; opacity: 0; background: rgba(0, 0, 0, .4); *background: #000000; *opacity:0.9; *filter:alpha(opacity=9);}
			.mui-popup-backdrop.mui-active {opacity: 1;}
		</style>
	</head>

	<body>
		<div class="wrap">
			<div class="sy_header clearfix">
				<div class="sy_hleft">
					<ul class="sy_nav clearfix">
						<li >
							<a href="index.html">
								<div class="iconfont icon-shouyintai"></div>
								<p>工作台</p>
							</a>
						</li>
						<li>
							<a href="orders.html">
								<div class="iconfont icon-saomashouyin"></div>
								<p>订单流水</p>
							</a>
						</li>
						<li class="active">
							<a href="yd.html">
								<div class="iconfont icon-shangpinshouyin"></div>
								<p>预定管理</p>
							</a>
						</li>
						<li>
							<a href="jiaoban.html">
								<div class="iconfont icon-shangpinshouyin"></div>
								<p>交班</p>
							</a>
						</li>
						<li>
							<a href="set.html">
								<div class="iconfont icon-weibiaoti-"></div>
								<p>设置</p>
							</a>
						</li>
					</ul>
				
				</div>
				<div class="sy_hright">
					<div class="sy_shopbox">
						<div class="sy_simg"><img id="toux" src="" style="background-color: #FFFFFF;"></div>
						<div class="sy_sinfo">
							<p class="sy_snam">店名：<span id="sname"></span></p>
							<p>用户：<span id="user"></span></p>
							<p class="exit" onclick="exit()">退出登陆</p>
						</div>
					</div>
				</div>
				
			</div>
			<div class="sy_conbox clearfix">
					<div class="sy_xftop clearfix">
					<div class="layui-form-item">
						<div style="text-align: center;">
							<em class="em1" onclick="bef_day()">往前十天</em><em class="em2">2-14</em><em class="em3">2-24</em><em class="em4" onclick="after_day()">往后十天</em>
						</div>
					</div>
					</div>
			</div>
			<div class="sy_proleft">
					<div style="height: 500px;overflow: hidden;">
						<ul class="fant_list clearfix">
							<!--<li>
								<div><span class="ydtime">15号</span></div>
								<div class="ydline"></div>	
								<div class="sells">可售数:214</div>
								<div class="yds">预定数:10</div>
								<div class="ydb"><button class="ydbtn">详情</button></div>
							</li>-->
							
						</ul>
					</div>
				</div>
				<div class="bt_name">鸿运集团酒店欢迎您</div>
		</div>
				<div class="jjbbp_conbox" style="display: none;" >
			<div class="jjbbp_item">
				<div class="jjbbp_bt"><em id="detail_time"></em>号订房情况</div>
				<div class="jjbbp_bt"><em style="background-color: #169bd5;color: white;font-size: 12px;padding:6px 35px;">预订数量:<em id="ysnums">0</em></em></div>
				<ul id="yslist" class="jjbbp_list clearfix">
					
				</ul>
				<div class="jjbbp_bt"><em style="background-color: #CCCCCC;color: white;font-size: 12px;padding:6px 35px;">剩余数量:<em id="wsnums">0</em></em></div>
				<ul id="wslist" class="jjbbp_list clearfix">
					
				</ul>
			</div>

			</div>
		
	</body>

</html>
<script type="text/javascript" src="dist/jquery-1.11.0.min.js"></script>
<script src="dist/layui.all.js"></script>
<script src="dist/json2.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/common.js?1=1"></script>
<script type="text/javascript">
			var time=new Date();
			var start_time=dateFtt("yyyy-MM-dd",time);
			$(".em2").text(start_time);
			var end=addDay(10,time);
			var end_time=dateFtt("yyyy-MM-dd",end);
			$(".em3").text(end_time);
			
			get_data();
			function bef_day(){
				time=addDay(-10,time);
				start_time=dateFtt("yyyy-MM-dd",time);
				$(".em2").text(start_time);
				end=addDay(10,time);
				end_time=dateFtt("yyyy-MM-dd",end);
				get_data();
				$(".em3").text(end_time);
				$(".em1").css("color","#169bd5");
			}
			function after_day(){
				time=addDay(10,time);
				start_time=dateFtt("yyyy-MM-dd",time);
				$(".em2").text(start_time);
				end=addDay(10,time);
				end_time=dateFtt("yyyy-MM-dd",end);
				$(".em3").text(end_time);
				get_data();
				$(".em1").css("color","#169bd5");
			}
			function get_data(){
					var index = layer.load(1, {
						shade: [0.1, '#fff'] //0.1透明度的白色背景
					});
					//写入数据库
					$.ajax({
						url:APP.path+"index/yd_list",
						type:"POST",
						//请求的过程中传递过去的参数 json
						data: {
							start_time	: start_time,
							end_time		: end_time,
							store_id		:getValue("store_name_id"),
							app_id	:APP.app_id,
							time:Date.parse( new Date())
						},
						//成功了的回调，并且带有返回值
						success: function(data) {
							layer.close(index);
							var yds=data.data;
							var html="";
							for(var i in  yds){
								var yd=yds[i];
							html+=	'<li>'+
									'<div><span class="ydtime">'+yd['day']+'号</span></div>'+
									'<div class="ydline"></div>	'+
									'<div class="sells">可售数:'+yd['ws']+'</div>'+
									'<div class="yds">预定数:'+yd['ys']+'</div>'+
									'<div class="ydb"><button class="ydbtn" onclick="show_info(\''+yd['time']+'\')">详情</button></div>'+
									'</li>';
							}
							$(".fant_list").html(html);
						}
					})
				
			}
			function show_info(time){
				var index = layer.load(1, {
						shade: [0.1, '#fff'] //0.1透明度的白色背景
				});
				$("#detail_time").text(time);
				$.ajax({
					url: APP.path + "index/yd_detail",
					type:"POST",
					data: {
						store_id:getValue("store_name_id"),
						start_time:time,
						app_id: APP.app_id,
						time: Date.parse(new Date())
					},
					success: function(data) {
						layer.close(index);
						$("#ysnums").text(data.total_ys);
						$("#wsnums").text(data.total_ws);
						var list=data.data;
						var list2=data.data2;
						console.log(list);
						var ys_html="";
						var ws_html="";
						for(var i in list){
							var room=list[i];
							ws_html+='<li>'+
								'<span class="bt">'+room['room_name']+'：</span>'+
								'<span id="order_sn" class="nr">'+room['ws']+' 间</span>'+
								'</li>';
						}
						for(var i in list2){
							var room2=list2[i];
							ys_html+='<li>'+
								'<span class="bt">'+room2['room_name']+'：</span>'+
								'<span id="order_sn" class="nr">'+room2['z_num']+' 间</span>'+
								'</li>';
						}
						$("#yslist").html(ys_html);
						$("#wslist").html(ws_html);
						layer.open({
							title: false,
							shadeClose: false,
							shade: 0.8,
							btn: false,
							area: ['750px', '550px'],
							content: $(".jjbbp_conbox").html()
						});
					}
				})
			}
		
</script>